<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>聊天对话框</title>
<style type="text/css">
*{font-size: 14px; padding:0; margin:0;}
.main{
	position: relative;
	margin: 20px auto;
	border: 1px solid steelblue;
	width: 430px;
	height: 400px;
}
.msgInput{
	display: block;
	width: 406px;
	height: 60px;
	margin: 10px auto;
	
}
.sendbtn{
	position: absolute;
	width: 100px;
	height: 29px;
	bottom: 5px;
	right: 10px;
}
.content{
	list-style: none;
	width: 410px;
	height: 280px;
	margin: 5px auto;
	border: 1px dotted #D1D3D6;
	overflow-y: scroll;
}
.msgContent{
	width:auto;
	max-width: 250px;
	height: auto;
	word-break: break-all;
	margin: 5px;
	padding: 3px;
	border-radius: 5px;
}

.content .left{
	float: left;
	text-align: left;
	background-color: lightgrey;
}
.content .right{
	float: right;
	text-align: right;
	background-color: yellowgreen;
}


</style>
<script type="text/javascript">
	window.onload = function(){
    var sendBtn = document.getElementById("sendbtn"),
    input = document.getElementById("msg_input"),
    content = document.getElementById("content");
    sendBtn.onclick = function(){
        
        var msg = input.value;  //获取输入框的内容
        
              //  msg = msg.replace(/\n/g,"<br>");
        // console.log("msg:"+msg);
        if(msg == ''){
            return;
        }
        var li = document.createElement("li");  //创建li元素
        var div = document.createElement("div");
        li.innerText = msg;     //赋值
        li.className = "msgContent right"; //设置样式
        div.style = "clear:both";
        content.appendChild(div);
        content.appendChild(li); //把li加到content里

        input.value = "";  //输入框清除
        li.scrollIntoView(); //滚动条滑动到底部
    }
    //会在输入框产生回车符，onkeydown会在键盘按下触发，
    // input.onkeydown = function(event){
    //     var asc = event.keyCode;
    //     if(asc == 13){
    //     }
    // }
    
    // 执行顺序
    // down
    // press
    // up
    input.onkeyup = function(event){
        var asc = event.keyCode;
        if(asc == 13 && event.ctrlKey) {
            sendBtn.onclick();

        }
    }

		
	}
</script>

</head>

<body>
	<div id="main" class="main">
		<ul id="content" class="content">
			<li class="msgContent left">hello?</li>
			<div style="clear:both"></div>
			<li class="msgContent left">hello</li>
			<div style="clear:both"></div>
			<li class="msgContent right">hi</li>
			<div style="clear:both"></div>
			<li class="msgContent left">hehe</li>
			<div style="clear:both"></div>
			<li class="msgContent left">goodbye</li>
			<div style="clear:both"></div>
			<li class="msgContent right">。。。。</li>
			<div style="clear:both"></div>
			<li class="msgContent right">shabi</li>
			
		</ul>
		<textarea id="msg_input" class="msgInput"></textarea>
		<button id="sendbtn" class="sendbtn">发送</button>
	</div>
</body>
</html>
